<template>
	<div class="smallVideo-box" ref="smallVideoBox">
		<!--<ul class="h-great-list">
			<li v-for="v in videoArr" @click="clickLookBack(v)">
				<a :href="v.video">
					<img :src="v.imagUrl"  v-on:click.self.prevent/>
				</a>
				<p>{{v.title}}</p>
			</li>
		</ul>-->
		<VideoInline :list="videoArr" pageType="smallVideo"></VideoInline>
	</div>
</template>
<script>
	import wxApi from '../util/wxApi'
	export default {
		data() {
			return {
				videoArr: [],
				page: 1,
				flag: true
			}
		},
		mixins: [wxApi],
		created: function() {
			this.getSmallVideo();
			this.dotNum()
		},
		activated() {
			this.$store.dispatch('showNav');
		},
		destroyed() {
			this.$store.dispatch('hideNav');
		},
		mounted: function() {
			let _this = this;
			_this.$refs.smallVideoBox.onscroll = function() {
				let scrollTop = _this.$refs.smallVideoBox.scrollTop
				let windowHeight = _this.$refs.smallVideoBox.clientHeight;
				let scrollHeight = _this.$refs.smallVideoBox.scrollHeight;
				if(scrollTop + windowHeight >= scrollHeight && _this.flag) {
					_this.page++
						_this.flag = false
					_this.$http.get("/h5live/mirovideo?p=" + _this.page).then(
						res => {
							if(res.data.code == "000000") {
								let smallVideoData = res.data.data;
								for(var i = 0; i < smallVideoData.length; i++) {
									_this.videoArr.push(smallVideoData[i]);
								}
								_this.flag = true
								if(res.data.data.length == 0) {
									_this.flag = false
								}
							}

						},
						err => {}
					);
				}
			}
		},
		methods: {
			dotNum() { //统计
				let _this = this;
				var argumentData = {
					sessionId: "smallVideo_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app 游客为web
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			getSmallVideo: function() {
				let _this = this;
				_this.$http.get('/h5live/mirovideo?p=' + _this.page).then((res) => {
					//console.log(res.data.code); //小视频数组
					if(res.data.code == '000000') {
						_this.videoArr = res.data.data;
					} else {
						console.log(err);
					}
				}, (err) => {
					console.log(err);
				})
			},
			wxRegCallback: function() {
				let opstion = {
					title: '【中银直播间】一起来看直播吧！', // 分享标题
					desc: '看直播，了解中国银行手机直播！', //分享描述
					imgUrl: this.$store.state.SysOrgInfo.icon,
					success: function() {
						//alert('分享成功')
					},
					error: function() {}
				}
				this.ShareTimeline(opstion)
			}
		},
		computed: {
			isLoadIcon() {
				if(this.$store.state.SysOrgInfo.icon) {
					this.wxRegister(this.wxRegCallback);
					return true
				} else {
					return false
				}
			}
		},
		watch: {
			isLoadIcon(val, oldVal) {}
		}
	}
</script>
<style scoped="scoped">
	.smallVideo-box {
		width: 100vw;
		height: calc(100vh - 96px);
		overflow-y: scroll;
	}
	
	.h-great-list {
		width: 100vw;
		padding: 0 30px 0px 30px;
	}
	
	.h-great-list li {
		float: left;
		width: 48.6%;
		margin-top: 22px;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		/* Firefox */
		-webkit-box-sizing: border-box;
		/* Safari */
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 2px 8px 2px rgba(8, 9, 6, 0.1);
		border-radius: 10px;
	}
	
	.h-great-list li:nth-child(even) {
		margin-left: 16px;
	}
	
	.h-great-list li img {
		width: 100%;
		height: 196px;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}
	
	.h-great-list li a {
		width: 100%;
		display: block;
		position: relative;
	}
	
	.h-great-list li p {
		width: 100%;
		padding-top: 15px;
		padding-bottom: 20px;
		font-size: 28px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 20px;
	}
</style>